<template>
	<view>
		<view class="task_label flexRow">
			<image src="/static/img/task_lable.png"></image>
			<view>请选择历史账号</view>
		</view>
		<view class="list_null" v-if="load && list.length==0">
			暂无历史账号
		</view>
		<view class="account_list" v-if="load && list.length!=0">
			<view class="account_item flexRow" :class="{check_border: item.is_default}" v-for="(item,key) in list" :key="key" @longpress="delAccount(item)">
				<image src="/static/img/col2.png" mode=""></image>
				<view class="account_cnetet">
					<view class="account_name text-ellipsis-2">
						{{item.urls}}
					</view>
					<view class="account_text">
						可一键切换此账号
					</view>
				</view>
				<view class="account_btn" @tap="setDefault(item)" :class="{check_btn: item.is_default}">{{item.is_default?'默认账号':'设为默认'}}</view>
			</view>
			<!-- <view class="account_item flexRow check_border">
				<image src="/static/img/col2.png" mode=""></image>
				<view class="account_cnetet">
					<view class="account_name text-ellipsis-2">
						紧张～浙江一年轻孕妇走着走着，肚里小孩生下来了！视频还原现场全过程@抖音小助手 https://v.douyin.com/Edv5nY/ 复制此链接，打开【抖音短视频】，直接观看视频！
					</view>
					<view class="account_text">
						已选择此账号，可切换其它
					</view>
				</view>
				<view class="account_btn check_btn">默认账号</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import request from "../../apiRequest/request.js"
	export default {
		data() {
			return {
				taskID: '',
				load: false,
				list: []
			}
		},
		methods: {
			delAccount(item){
				let that = this
				uni.showModal({
				    title: '',
				    content: '是否删除历史账号?',
				    success: function (res) {
				        if (res.confirm) {
							request.deleteAccount(item.id).then(res=>{
								console.log(res)
								uni.showToast({
								    title: '删除成功',
									icon: 'none',
								    duration: 1000
								})
								setTimeout(()=>{
									that.initList()
								}, 1000)
							})
				          console.log('用户点击确认');
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			setDefault(item){
				console.log(item)
				if(item.is_default){
					return
				}
				request.bindTaskid(this.taskID,item.urls).then(res=>{
					uni.showToast({
					    title: '切换成功',
						icon: 'none',
					    duration: 1000
					})
					setTimeout(()=>{
						this.initList()
					}, 1000)
				}).catch(err=>{
					this.$unexpected(err)
				})
			},
			initList(){
				request.accountList(this.taskID).then(res=>{
					console.log(res)
					this.load = true
					this.list = res.data.list
				}).catch(err=>{
					this.$unexpected(err)
				})
			}
		},
		onLoad(option) {
			console.log('account:',option.taskID);
			this.taskID = option.taskID
			this.initList()
		}
	}
</script>

<style>
.task_label{
	padding-left: 20rpx;
}	
.account_list{
	padding: 0 20rpx;
	box-sizing: border-box;
}
.account_item{
	background:rgba(238,246,255,1);
	border-radius:10rpx;
	padding: 28rpx 20rpx;
	align-items: center;
	margin-bottom: 20rpx;
	box-sizing: border-box;
	flex-wrap: nowrap;
	justify-content: space-between;
}
.check_border{
	border:1rpx solid rgba(4,137,255,1);
}
.account_item>image{
	width:80rpx;
	height:80rpx;
	border-radius:50%;
	margin-right: 40rpx;
}
.account_cnetet{
	max-width: 320rpx;
	box-sizing: border-box;
}
.account_btn{
	width:180rpx;
	height:60rpx;
	line-height: 60rpx;
	text-align: center;
	background:rgba(4,137,255,1);
	border-radius:10rpx;
	font-size:28rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(255,255,255,1);
	margin-right: 20rpx;
	/* margin-left: 20rpx; */
}
.account_name{
	font-size:28rpx;
	font-family:Source Han Sans SC;
	font-weight:bold;
	color:rgba(51,51,51,1);
	line-height:42rpx;
}
.account_text{
	font-size:22rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(116,120,124,1);
	line-height:28rpx;
	opacity:0.99;
}
.check_btn{
	background:rgba(229,229,229,1);
	color:rgba(172,172,172,1);
}
.list_null{
	font-size: 28rpx;
	font-family: Source Han Sans SC;
	font-weight: bold;
	color: rgba(51,51,51,1);
	line-height: 42rpx;
	text-align: center;
	margin-top: 60rpx;
}
</style>
